<template>
  <div>
    <div v-if="rootActive === 'prma'" ref="top-tabs" style="box-shadow: '3px 0px 6px 0 rgba(0, 0, 0, 0.12)';">
      <!-- <a-tabs v-model="businessTabActive" class="business-tabs" @change="handleBusinessTabs">
        <a-tab-pane v-for="item in businessTabOptions" :key="item.raw.code" :tab="item.raw.name"
          :style="{ margin: '0' }" />
      </a-tabs> -->

      <MenuTabs v-model="businessTabActive" :list="businessTabOptions" :collapsed="showSecondaryMenu"/>
      <div class="data-filter" v-if="businessTabActive === businessSearchCode" @click="handleBusinessFilter">
        数据筛选
        <img v-if="showSecondaryMenu" src="../assets/icons/data_filter.png" style="margin-right: 0; width: 16px; height: 16px;" alt="">
        <!-- <BaseSvgIcon style="margin-right: 0" class="icon-item" icon="PM" color="gray" /> -->
      </div>
    </div>
    <!--左边-->
    <!--一级菜单-->
    <div class="leftMenu left-menu" :style="{ top: `${topTabsHeight}px`, height: `calc(100% - ${topTabsHeight}px)` }">
      <!-- <div class="left-menu-btn">
        <a-icon type="up" :disabled="downBtn" @click="handleMenuMove('down')" />
      </div> -->
      <ul ref="menuList" class="left-menu-list" @mousedown="menuDrag" @wheel="menuWheel">
        <div ref="cursor" class="left-menu-list-cursor" />
        <li v-for="item in mainMenus" :key="item.id"
          :class="{ 'left-menu-item-active': menuActive[0] === item.raw.code }" @click="handleChange($event, item, 1)">
          <div class="left-first-menu-item">
            <a-badge :count="badgeShow(item) ? messageCount[item.raw.code] : 0"
              :number-style="{ backgroundColor: '#F59A23' }" :offset="[-6, 4]">
              <img :src="filterMenuIcon(item.raw.code)" :style="{ width: '24px', height: '24px' }" />
              <p>{{ item.raw.name }}</p>
            </a-badge>
            <i v-if="rootActive === 'prma' && !!item.children.length"
              :class="`left-first-menu-arrow ${menuActive[0] === item.raw.code ? 'left-first-menu-arrow-active' : ''}`"></i>
          </div>
          <ul v-if="rootActive === 'prma' && !!item.children.length" class="left-menu-list-sub"
            :style="{ height: menuActive[0] === item.raw.code ? `${item.children.length * 48}px` : '0' }">
            <li v-for="subItem in item.children" :key="subItem.id"
              :class="{ 'left-menu-item-sub-active': menuActive[1] === subItem.raw.code }"
              @click="handleChange($event, subItem, 2)">
              <a-badge :count="badgeShow(subItem) ? messageCount[subItem.raw.code] : 0"
                :number-style="{ backgroundColor: '#F59A23' }" :offset="[-6, 4]">
                <img :src="filterMenuIcon(subItem.raw.code)"
                  style="width: 16px; height: 16px; margin-bottom: 3px;margin-right: 4px;" />
                <span>{{ subItem.raw.name }}</span>
              </a-badge>
            </li>
          </ul>
        </li>
      </ul>
      <!-- <div class="left-menu-btn">
        <a-icon type="down" :disabled="upBtn" @click="handleMenuMove('up')" />
      </div> -->
    </div>

    <!--二级菜单-->
    <div class="menuLists"
      :style="{ left: showSecondaryMenu ? '80px' : '-120px', top: `${topTabsHeight}px`, height: `calc(100% - ${topTabsHeight}px)` }">
      <div>
        <!-- <div class="logoName">
          <img style="margin-right: 5px; width: 40px" src="../../src/assets/logo.png" />
          <div style="width: 100px; height: 40px; font-size: 14px; display: flex; flex-direction: column; align-items: center">
            <div>{{ title1 }}</div>
            <div>{{ title2 }}</div>
          </div>
        </div> -->
        <div>
          <div class="menuList">
            <div v-for="item in menuList" :key="item.id">
              <div v-if="item.children && !!item.children.length">
                <a-menu mode="inline" :selected-keys="selectedKeys" :style="{ height: '100%', borderRight: 0 }"
                  :open-keys="newOpenKeys" class="menu" @openChange="handelMenuOpenChange">
                  <a-sub-menu v-if="item.raw.style != 'hidden'" :key="item.id">
                    <span slot="title">
                      <a-icon type="home" />
                      <a-badge :count="badgeShow(item) ? messageCount[item.raw.code] : 0"
                        :number-style="{ backgroundColor: '#F59A23' }" :offset="[6, -2]">
                        <ellipsis :length="15" tooltip placement="right">{{ item.raw.name }}</ellipsis>
                      </a-badge>
                    </span>
                    <template v-for="items in item.children">
                      <template v-if="items.raw.style != 'hidden'">
                        <a-menu-item v-if="!items.children.length" :key="items.id"
                          @click="handleLink(items.raw.value, items)">
                          <a-badge :count="messageCount[items.raw.code]" :number-style="{ backgroundColor: '#F59A23' }"
                            :offset="[6, -2]">
                            <ellipsis :length="18" tooltip placement="right">
                              {{ items.raw.name }}
                            </ellipsis>
                          </a-badge>
                        </a-menu-item>
                        <a-sub-menu v-else :key="items.id" :title="items.raw.name">
                          <template v-for="four in items.children">
                            <a-menu-item class="four-menu" v-if="four.raw.style != 'hidden'" :key="four.raw.id"
                              @click="handleLink(four.raw.value, four)">
                              <a-badge :count="messageCount[four.raw.code]"
                                :number-style="{ backgroundColor: '#F59A23' }" :offset="[6, -2]">
                                <ellipsis :length="18" tooltip placement="right">
                                  {{ four.raw.name }}
                                </ellipsis>
                              </a-badge>
                            </a-menu-item>
                          </template>
                        </a-sub-menu>
                      </template>
                    </template>
                  </a-sub-menu>
                </a-menu>
              </div>
              <div v-else>
                <a-menu mode="inline" :selected-keys="activePath" :style="{ height: '100%', borderRight: 0 }"
                  class="menu" @click="handleLink(items.raw.value, item)">
                  <a-sub-menu v-if="item.raw.style != 'hidden'" :key="item.id">
                    <span slot="title">
                      <a-icon type="home" />
                      <a-badge :count="badgeShow(item) ? messageCount[item.raw.code] : 0"
                        :number-style="{ backgroundColor: '#F59A23' }" :offset="[6, -2]">
                        <ellipsis :length="15" tooltip placement="right">{{ item.raw.name }}</ellipsis>
                      </a-badge>
                    </span>
                  </a-sub-menu>
                </a-menu>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="left-layer-retract-btn base-btn" :style="{
      ...retractStyle,
      left: showSecondaryMenu ? '280px' : '80px'
    }" @click="handleSecondaryMenu">
      <a-icon v-if="!showSecondaryMenu" type="caret-right" />
      <a-icon v-else type="caret-left" />
    </div>
    <BusinessFilterModal :visible.sync="businessFilterModalVisible" />
  </div>
</template>
<script>
import Vue from 'vue'
import { mapState } from 'vuex'
import ASubMenu from 'ant-design-vue/es/menu/SubMenu'
import { Ellipsis } from '@/components'
import setting from '@/config/defaultSettings'
import { getMenuIcon } from '@/utils/util.js'
import BusinessFilterModal from './BusinessFilterModal.vue'
import MenuTabs from './MenuTabs.vue'
import { BUSINESS_MENU_TYPE } from '@/config/businessConfig'

export default {
  name: 'MenuBasic',
  components: {
    ASubMenu,
    Ellipsis,
    BusinessFilterModal,
    MenuTabs
  },
  computed: {
    ...mapState({
      // 动态主路由
      mainMenu: (state) => state.permission.addRouters,
      menus: (state) => state.user.menus,
      businessSearchConditions: state => state.user.businessSearchConditions
    }),
    businessTabOptions() {
      return this.menus.find(item => item.raw.code === 'prma')?.children
    },
    // 待办事项总数
    toDoCount() {
      let count = Number(this.$store.getters['messageInfo/GET_TODOCOUNT'])
      return isNaN(count) ? 0 : count
    },
    // 已办事项总数
    doneCount() {
      let count = Number(this.$store.getters['messageInfo/GET_DONECOUNT'])
      return isNaN(count) ? 0 : count
    },
    // 待处理总数
    toReadCount() {
      let count = Number(this.$store.getters['messageInfo/GET_TOREADCOUNT'])
      return isNaN(count) ? 0 : count
    },
    // 岗位变更日志
    toReadPostsChangeLog() {
      let count = Number(this.$store.getters['messageInfo/GET_TOREADPOSTSCHANGELOGCOUNT'])
      return isNaN(count) ? 0 : count
    },
    // 新闻数量
    toNewsCount() {
      let count = Number(this.$store.getters['messageInfo/GET_TONEWSCOUNT'])
      return isNaN(count) ? 0 : count
    },
    businessSearchCode() {
      return BUSINESS_MENU_TYPE[3].code
    },
    messageCount() {
      const counts = {
        thi: this.toDoCount + this.toReadCount + this.doneCount,
        pece_dbsx: this.toDoCount,
        pece_dbsx_sxgl: this.toDoCount + this.doneCount,
        pece_dbsx_sxgl_dbsx: this.toDoCount,
        // thi_002: this.toReadCount,
        // thi_002_ddxx: this.toReadCount,
        // pece_ybsx: this.doneCount,
        syma_yhgl: this.toReadPostsChangeLog, //菜单：系统
        syma_yhgl_xtyhgl: this.toReadPostsChangeLog, //菜单：系统-系统用户管理
        syma_gwbgrz: this.toReadPostsChangeLog, //菜单：系统-岗位变更日志
        pece_ddxx: this.toReadCount, // 通知消息： 未读消息
        pece_tzxx_tzxx: this.toReadCount,
        pece_tzxx: this.toReadCount
      }
      return counts
    },
    activePath(val) {
      let path = this.$route.path
      // pathMap储存着当前路由页面的来源，键为当前路由的fullPath,值为来源的fullPath
      const pathMap = this.$store.getters['tabInfo/GET_PATHMAP']
      // console.log(pathMap)
      // if(pathMap) {
      //   const { noTab } = this.$route.meta
      //   const { fullPath } = this.$route
      //   path = noTab && pathMap[fullPath] || path
      // }
      if (pathMap) {
        const { fullPath } = this.$route
        let res = pathMap.find((v) => v.fullPath === fullPath)
        if (res) {
          path = res.path
        }
      }
      return [path]
    },
    hasSubMenu() {
      if (this.rootActive === 'prma') {
        return this.mainMenu
      }
    },
    selectedKeys() {
      return this.activeCodes.map(code => this.dataList.find(item => item.code === code)?.id).filter(code => !!code)
    }
  },
  props: {
    rootActive: {
      type: String,
      default: 'prma'
    },
    collapsed:{
      type: Boolean,
      require: true
    }
  },
  data() {
    return {
      newOpenKeys: [], // 打开的菜单
      title1: setting.title1, // 标题
      title2: setting.title2, // 标题
      showSecondaryMenu: !this.collapsed,
      count: 0,
      menuList: [],
      menuActive: ['', ''], // 当前tab
      thirdMenu: false, // 三级菜单
      dataList: [], // 单级所有菜单
      status: 'all',
      retractStyle: {
        cursor: 'pointer',
        background: `url("") center center no-repeat`
      },
      // 菜单按钮禁用状态
      upBtn: false,
      downBtn: false,
      badgeMenus: new Set(['pece_dbsx', 'pece_dbsx_sxgl', 'syma_yhgl', 'syma_yhgl_xtyhgl', 'pece_tzxx', 'pece_tzxx_tzxx']),
      badgeShow: (e) => {
        const b = new Set(e.children.map((i) => i.raw.code))
        const intersect = new Set([...this.badgeMenus].filter((x) => b.has(x)));
        return Array.from(intersect)?.length !== 0
      },
      topTabsHeight: 0,
      businessTabActive: '',
      mainMenus: [],
      activeCodes: [],
      businessFilterModalVisible: false,

    }
  },
  mounted() {
    let menus0 = []
    // 把多级菜单生成单级全部列表
    this.generateList(this.menus)
    // if (this.activePath == this.$router.options.routes[0].path) {
    //   let okMenus = this.menus.filter((v) => this.filterMenuIcon(v.raw.code) !== '')
    //   // menus0 = this.menus[0]
    //   // this.menuActive = this.menus[0].id
    //   menus0 = okMenus[0]
    //   // this.menuActive = okMenus[0].id
    // } else {
    //   // 初始化菜单
    //   // this.initMenu()
    //   menus0 = this.menus.find((item) => item.raw.code == this.menuActive[0])
    // }
    // if (menus0 && Object.keys(menus0).length > 0) {
    //   this.menuList = menus0.children
    // } else {
    //   this.menuList = []
    // }
    // this.getTwoMenu(menus0)
    this.activeCodes = this.$store.state.user.activeCodes.map(item => item)
    this.setLeftMenus()
  },
  watch: {
    rootActive: {
      handler() {
        this.$nextTick(() => {
          this.topTabsHeight = this.$refs['top-tabs'] ? this.$refs['top-tabs'].clientHeight : 0
          this.setLeftMenus()
        })
      },
      immediate: true
    },
    businessTabActive: {
      handler() {
        this.$nextTick(() => {
          this.topTabsHeight = this.$refs['top-tabs'] ? this.$refs['top-tabs'].clientHeight : 0
          this.setLeftMenus()
        })
      },
      immediate: true
    },
    activePath() {
      this.activeCodes = this.$store.state.user.activeCodes.map(item => item)
      this.updateOpenKeys()
      if (!this.activeCodes || !this.activeCodes.length) return
      this.businessTabActive = ''
      this.menuActive = ['', '']
      let activeIndex
      if (this.activeCodes[0] === 'prma') {
        this.businessTabActive = this.activeCodes[1] || BUSINESS_MENU_TYPE[1].code
        if (this.activeCodes.length > 4) {
          activeIndex = 3
          this.menuActive = [this.activeCodes[2], this.activeCodes[3]]
        } else {
          activeIndex = 2
          this.menuActive = [this.activeCodes[2], this.menuActive[1]]
        }
      } else {
        activeIndex = 1
        this.menuActive = [this.activeCodes[1], this.menuActive[1]]
      }
      //不是工程菜单才执行
      if(this.activePath[0] !== '/bi/project'){
        this.getTwoMenu(this.findMenuFromCode(this.activeCodes[activeIndex], this.menus))
      }
    },
    businessSearchConditions: {
      handler() {
        this.menuList = this.filterMenuList(this.menuList)
      },
      deep: true
    },
  },
  methods: {
    // 根据code查找菜单
    findMenuFromCode(code, list) {
      let data = list.find(item => item.raw.code === code)
      if (!!data) return data
      list.forEach(item => {
        if (!!data) return
        data = this.findMenuFromCode(code, item.children)
      })
      return data
    },
    // 设置二级菜单
    setLeftMenus() {
      if (this.rootActive === 'prma') {
        // 项目管理菜单
        const projectMenu = this.menus.find(item => item.raw.code === this.rootActive)
        this.businessTabActive = this.businessTabActive || this.activeCodes.find(code => this.businessTabOptions.some(item => item.raw.code === code)) || this.businessTabOptions[0].raw.code
        this.mainMenus = projectMenu?.children.find(item => item.raw.code === this.businessTabActive)?.children
        const firstIndex = this.mainMenus.findIndex(item => this.activeCodes.some(code => code === item.raw.code))
        if (firstIndex < 0) return
        this.menuActive = [this.mainMenus[firstIndex]?.raw.code || '', this.menuActive[1]]
        if (this.mainMenus[firstIndex] && this.mainMenus[firstIndex].children.length) {
          this.menuActive = [this.menuActive[0], this.activeCodes.find(code => this.mainMenus[firstIndex].children.some(item => item.raw.code === code))]
          this.getTwoMenu(this.mainMenus[firstIndex].children.find((item) => this.menuActive.some(i => i === item.raw.code)))
        } else {
          this.getTwoMenu(this.mainMenus.find((item) => this.menuActive.some(i => i === item.raw.code)))
        }
      } else {
        this.businessTabActive = ''
        this.mainMenus = this.menus.find(item => item.raw.code === this.rootActive)?.children
        if (this.mainMenus) {
          const firstIndex = this.mainMenus.findIndex(item => this.activeCodes.some(code => code === item.raw.code))
          if (firstIndex < 0) return
          this.menuActive = [this.mainMenus[firstIndex]?.raw.code || '', this.menuActive[1]]
          this.getTwoMenu(this.mainMenus.find((item) => this.menuActive.some(i => i === item.raw.code)))
        }
      }
    },
    /**
     * 更新打开菜单
     */
    updateOpenKeys() {
      if (this.activePath == '/index') {
        this.newOpenKeys = []
        return
      }
      this.newOpenKeys = this.activeCodes.map(code => this.dataList.find(item => item.code === code)?.parentId).filter(code => !!code)
    },
    /**
     * 保持最多打开一个二级菜单项
     */
    handelMenuOpenChange(openKeys) {
      this.newOpenKeys = openKeys
    },
    /**
     * 处理菜单图标异常
     * @param {Object} data 菜单对象
     */
    filterMenuIcon(code) {
      return getMenuIcon(code) || getMenuIcon('kb')
    },
    handleSecondaryMenu() {
      this.showSecondaryMenu = !this.showSecondaryMenu
      // 清除初始左侧菜单状态
      localStorage.setItem('initCollapsed','false')
      this.$emit('switchSecondaryMenu', this.showSecondaryMenu)
    },
    handleLink(path, item) {
      // 跳转到系统外的路径
      const outMap = {
        '/cscec8b': 'https://app.cscec8b.com.cn/portalwebii/index.html#/login',
        '/humanResources/home': 'https://hr.cscecxn.com/api/auth/login_by_sso?sso=customer_sso&next=/%23/index&token=' + Vue.getAcloudProvider().getAccessToken() // 人力资源
      }
      const outPath = path.split('-')?.[0] || '';
      if (outMap[outPath]) {
        window.open(outMap[outPath], '_blank')
        return
      }

      this.activeCodes = []
      this.getActiveCodes(item.id)
      this.$store.commit('SET_ACTIVE_CODES', this.activeCodes)

      const businessCodes = Object.keys(BUSINESS_MENU_TYPE).map(key => BUSINESS_MENU_TYPE[key].code)
      const activeBusinessCode = this.activeCodes.find(code => businessCodes.some(item => item === code))
      //检查路由中是否以XX开头
      let _curPathPrefix = null;
      const routeRrefixLsit = ['/reportUrl']//指定路由前缀list
      for (var i = 0; i < routeRrefixLsit.length; i++) {
        if (new RegExp(`^${routeRrefixLsit[i]}.*$`).test(path)) {
          _curPathPrefix = routeRrefixLsit[i];
          break;
        }
      }
      if (_curPathPrefix) {
        this.$router.push({
          path: '/report/reportContents/reportList',
          query: {
            path: path,
            moduleName: _curPathPrefix,
            nameTil: item.raw.name
          }
        })
      } else {
        this.$router.push({
          path: `${outMap[outPath] ? outPath : path}${activeBusinessCode ? `?query=${activeBusinessCode}` : ''}`
        })
      }
    },
    getActiveCodes(currentId) {
      const current = this.dataList.find(item => currentId === item.id)
      if (current) {
        this.activeCodes.unshift(current.code)
        if (current.parentId) {
          this.getActiveCodes(current.parentId)
        }
      }
    },
    handleBusinessTabs(val) {
      if (val === 'businessSearch') {

      }
    },
    //工程处要求点击工程菜单直接打开工程的数据看板2023-06-05(陈洪佳要求增加)
    openBiBoardIfMatchCondition(level, item){
      if(level===2 && item['raw'] && item['raw']['code']==='seex_pm'){
        //console.log("工程菜单被点击了")
        this.$router.push({path: '/bi/project'})
      }
    },
    // 切换tab菜单
    handleChange(e, item, level) {
      e.stopPropagation()
      this.openBiBoardIfMatchCondition(level,item)
      // 点击菜单内部模块时展开侧边菜单
      // 项目管理的情况
      if(this.rootActive ==='prma'){
        // 二级菜单展开,一级菜单没有子元素展开
        if((level === 2 && !this.showSecondaryMenu) || (level === 1 && item.children.length === 0)){
          this.showSecondaryMenu = true
          // 清除初始左侧菜单状态
          localStorage.setItem('initCollapsed','false')
          this.$emit('switchSecondaryMenu', true)
        }
      }else{
      // 其他情况一级菜单自动展开侧边栏
        if(level === 1){
          this.showSecondaryMenu = true
          // 清除初始左侧菜单状态
          localStorage.setItem('initCollapsed','false')
          this.$emit('switchSecondaryMenu', true)
        }
      }

      if (this.menuActive.some(i => i === item.raw.code) && level === 2) return
      if (this.menuActive.some(i => i === item.raw.code) && level === 1) {
        this.menuActive = ['', this.menuActive[1]]
        return
      }
      if (this.rootActive === 'prma' && level === 1 && item.children.length) {
        // 项目管理并且有子集
        this.menuActive = [item.raw.code, this.menuActive[1]]
      } else if (this.rootActive === 'prma' && level === 2) {
        // 项目管理子级
        this.menuActive = [this.menuActive[0], item.raw.code]
        this.getTwoMenu(item)
      } else {
        // 项目管理和其他无子集
        this.menuActive = [item.raw.code, '']
        this.getTwoMenu(item)
      }
    },
    /**
     * @description: 菜单光标
     * @param {Void}
     * @return {Void}
     */
    cursorChange(e) {
      this.$refs.cursor.style.top = e.currentTarget.offsetTop + 'px'
    },
    /**
     * @description: 菜单拖拽
     * @param {Void}
     * @return {Void}
     */
    menuDrag(e) {
      const list = e.currentTarget
      let lastY = list.scrollTop
      let y = e.clientY
      document.onmousemove = (ev) => {
        const h = document.body.clientHeight
        const w = document.body.clientWidth
        // 判断是否在浏览器可视区域
        if (h - ev.clientY > 0 && h - ev.clientY < h && w - ev.clientX > 0 && w - ev.clientX < w) {
          const menuList = this.$refs.menuList
          let scrollTop = menuList.scrollTop
          let clientHeight = menuList.clientHeight
          let scrollHeight = menuList.scrollHeight
          list.scrollTop = lastY + (y - ev.clientY)
          if (scrollTop > 0) {
            this.downBtn = false
            if (scrollTop + clientHeight >= scrollHeight) {
              this.upBtn = true
            } else {
              this.upBtn = false
            }
          } else {
            this.downBtn = true
          }
        } else {
          document.onmousemove = null
        }
      }
      document.onmouseup = () => {
        document.onmousemove = document.onmouseup = null
      }
    },
    // 数据筛选
    handleBusinessFilter() {
      this.businessFilterModalVisible = true
    },
    /**
     * @description: 菜单鼠标滚动监听
     * @param {Void}
     * @return {Void}
     */
    menuWheel() {
      const menuList = this.$refs.menuList
      let scrollTop = menuList.scrollTop
      let clientHeight = menuList.clientHeight
      let scrollHeight = menuList.scrollHeight
      if (scrollTop > 0) {
        this.downBtn = false
        if (scrollTop + clientHeight >= scrollHeight) {
          this.upBtn = true
        } else {
          this.upBtn = false
        }
      } else {
        this.downBtn = true
      }
    },
    /**
     * @description: 菜单移动
     * @param {String} type 移动类型
     * @return {*}
     */
    handleMenuMove(type) {
      const menuList = this.$refs.menuList
      let clientHeight = menuList.clientHeight
      let scrollHeight = menuList.scrollHeight
      if (type === 'up') {
        let timer = null
        let index = 0
        const fun = () => {
          timer = setTimeout(() => {
            let scrollTop = menuList.scrollTop
            if (scrollTop + clientHeight < scrollHeight && index < 100) {
              menuList.scrollTop = menuList.scrollTop + 4
              index++
              this.downBtn = false
              fun()
            } else {
              this.upBtn = true
              clearTimeout(timer)
              timer = null
            }
          }, 4)
        }
        fun()
      }
      if (type === 'down') {
        let timer = null
        let index = 0
        const fun = () => {
          timer = setTimeout(() => {
            let scrollTop = menuList.scrollTop
            if (scrollTop > 0 && index < 100) {
              menuList.scrollTop = menuList.scrollTop - 4
              index++
              this.upBtn = false
              fun()
            } else {
              this.downBtn = true
              clearTimeout(timer)
              timer = null
            }
          }, 4)
        }
        fun()
      }
    },
    // 把多级菜单生成单级全部列表
    generateList(data) {
      for (let i = 0; i < data.length; i++) {
        const node = data[i]
        const id = node.id
        this.dataList.push({ id, parentId: node.parentId, value: node.raw.value, name: node.raw.name, code: node.raw.code })
        if (node.children) {
          this.generateList(node.children)
        }
      }
    },
    // 初始化菜单
    initMenu() {
      this.updateOpenKeys()
      let list = this.dataList.filter((i) => i.value == this.activePath)
      if (list.length > 0) {
        this.getParent(list[0])
      }
    },
    // 获取父级节点
    getParent({ parentId, code }) {
      // 筛选出节点
      let parentNode = this.dataList.filter((i) => i.id == parentId)
      // 有父级
      if (parentNode.length > 0) {
        // 再次获取父级
        this.getParent(parentNode[0])
        // 无父级
      } else {
        // 映射顶级菜单code
        this.menuActive = [code, '']
      }
    },
    getTwoMenu(item) {
      if (!item) {
        return
      }
      let _this = this
      let arr = item.children
      if (arr[0] != undefined) {
        if (item.children.length > 0) {
          _this.menuList = item.children
          _this.thirdMenu = true
        } else {
          _this.thirdMenu = false
        }
      } else {
        let arrys = []
        arrys.push(item)
        _this.menuList = arrys
      }
      this.menuList = this.filterMenuList(this.menuList)
    },
    filterMenuList(list) {
      const state1 = this.businessTabActive === BUSINESS_MENU_TYPE[3].code && !!this.businessSearchConditions.orgSet.length && !this.businessSearchConditions.detSet.length
      const state2 = this.businessTabActive === BUSINESS_MENU_TYPE[3].code && !!this.businessSearchConditions.detSet.length && !this.businessSearchConditions.orgSet.length
      // console.log('只选分公司, 业务执行0隐藏：',state1)
      // console.log('只选项目，业务管控1隐藏：',state2)
      return list.map(item => {
        if ((state1 && item.raw.queryType == '0') || (state2 && item.raw.queryType == '1')) {
          return {
            ...item,
            raw: {
              ...item.raw,
              style: 'hidden'
            },
            children: item.children && item.children.length ? this.filterMenuList(item.children) : item.children
          }
        } else {
          return {
            ...item,
            raw: {
              ...item.raw,
              style: null
            },
            children: item.children && item.children.length ? this.filterMenuList(item.children) : item.children
          }
        }
      })
    }
  }
}
</script>

<style lang="less">
.slide-fade-enter-active {
  transition: all 0.5s ease;
}

.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  transform: translateX(10px);
  opacity: 0;
}
</style>

<style lang="less" scoped="scoped">
@import './BasicLayout.less';

/deep/ .ant-tabs-left-bar {
  border-right: none !important;

  .ant-tabs-nav {
    .ant-tabs-tab {
      opacity: 0.6;
      color: #ffffff;
    }

    .ant-tabs-tab-active,
    .ant-tabs-tab-active:hover {
      opacity: 1;
      color: #fff;
    }

    .ant-tabs-ink-bar {
      background: #fff;
      right: initial !important;
      width: 3px !important;
    }
  }
}

/deep/ .three-menu {
  padding-left: 40px !important;
}

/deep/ .four-menu {
  padding-left: 56px !important;
}

.thirds {
  margin: 15px 0 15px 25px;
}

.openMenus {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 15px;
  margin-top: 30px;
}

.business-tabs {
  background-color: white;
  border-bottom: 1px solid #f0f0f0;
  height: 88px;

  // z-index: 10;
  /deep/ .ant-tabs-bar {
    border: none !important;
    height: 50px;
    margin: 16px 0;
  }

  /deep/ .ant-tabs-tab {
    margin: 0 !important;
    height: 50px;
  }

  /deep/ .ant-tabs-ink-bar {
    height: 100%;
    background: url(../assets/businessTabBg.png) no-repeat 100% 100%;
  }
}

.data-filter {
  background-color: white;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  line-height: 2.5;
  padding: 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: gray;
  cursor: pointer;
}

.leftMenu {
  background-color: #387FC6;
  width: 80px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  overflow-y: hidden;
  transition: all .3s ease;

  &::-webkit-scrollbar {
    display: none;
  }
}

.icons {
  padding-bottom: 6px;
  text-align: center;

  img {
    width: 18px;
  }
}

.listItem {
  margin-top: 5px;
  height: 80px;
}

.listItem.active {
  background: #02a7f0;
  height: 80px;
}

.logoName {
  margin: 12px 0;
  // overflow: hidden;
  display: flex;
  justify-content: center;
}

.logoImg {
  float: left;
  margin-right: 8px;
}

.logoTitle {
  line-height: 24px;
  color: #1890ff;
}

.menuLists {
  width: 200px;
  transition: 0.3s ease;
  /*width: 200px;*/
  background: #fff;
  height: 100%;
  position: absolute;
  top: 0;
  left: 80px;
  box-shadow: 4px 0px 8px 0px rgba(0, 0, 0, 0.04);
  overflow-y: auto;
  z-index: 9;
  scrollbar-width: none;
}

.menuLists::-webkit-scrollbar {
  display: none;
}

.menuList {
  // margin-top: 70px;
  // height: calc(100vh - 64px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.menuList /deep/ .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: #387FC6;
  border: 1px solid #0089d0;
  color: #fff;
}

.menuList /deep/ .ant-menu-vertical .ant-menu-item::after,
.ant-menu-vertical-left .ant-menu-item::after,
.ant-menu-vertical-right .ant-menu-item::after,
.ant-menu-inline .ant-menu-item::after {
  border: none;
}

.menuList /deep/ .ant-menu-inline .ant-menu-selected::after,
.ant-menu-inline .ant-menu-item-selected::after {
  border: none;
  transform: none;
}

.menuList /deep/ .ant-menu-item-selected>a,
.ant-menu-item-selected>a:hover {
  color: #fff;
}

.tabs {
  float: left;
  color: #387FC6;
  background: rgb(255, 255, 255);
  letter-spacing: 3px;
  height: 35px;
  margin-top: 12px;
  margin-left: 15px;
  padding: 8px 25px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.ant-pro-multi-tab .ant-pro-multi-tab-wrapper /deep/ .ant-tabs {
  overflow: auto;
}

.menuList /deep/ .ant-menu-inline .ant-menu-selected::after,
.ant-menu-inline .ant-menu-item-selected::after {
  transform: none;
}

/*.ant-pro-grid-content /deep/ .ant-page-header.has-breadcrumb {*/
/*padding-top: 30px;*/
/*}*/

.ant-tabs.ant-tabs-card .ant-tabs-card-bar /deep/ .ant-tabs-tab {
  margin-right: 10px;
}

.menuLists .menuList /deep/ .ant-menu.ant-menu-vertical.ant-menu-root.ant-menu-light {
  border-right: none;
}

.left-layer-retract-btn {
  width: 10px;
  height: 58px;
  position: fixed;
  top: 50%;
  left: 280px;
  z-index: 900;
  transform: translateY(-50%);
  transition: 0.3s ease;
  font-size: 16px;
  overflow: hidden;

  .anticon {
    background-color: #f7f7f7;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    left: -3px;
    font-size: 14px;
  }
}

.left-menu {
  // overflow: hidden;
  display: flex;
  flex-direction: column;
  // justify-content: center;
}

.left-menu-list {
  margin: 0;
  padding: 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100% - 30px);
  // width: 120px;
  user-select: none;

  &::-webkit-scrollbar {
    display: none;
  }

  >li {
    white-space: nowrap;
    width: 80px;
    text-align: center;
    cursor: pointer;
    opacity: 0.6;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);

    .left-first-menu-item {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 80px;
      height: 80px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);

      .left-first-menu-arrow {
        position: absolute;
        top: 28px;
        right: 18px;
        transform: translateY(-2px);
        transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      }

      .left-first-menu-arrow::before,
      .left-first-menu-arrow::after {
        position: absolute;
        width: 6px;
        height: 1.5px;
        background: white;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65));
        border-radius: 2px;
        transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        content: '';
      }

      .left-first-menu-arrow::before {
        transform: rotate(-45deg) translateX(2px);
      }

      .left-first-menu-arrow::after {
        transform: rotate(45deg) translateX(-2px);
      }

      .left-first-menu-arrow-active::before {
        transform: rotate(45deg) translateX(2px);
      }

      .left-first-menu-arrow-active::after {
        transform: rotate(-45deg) translateX(-2px);
      }
    }

    &:nth-last-of-type(1) {
      margin-bottom: 0;
    }

    &::after {
      content: '';
      position: absolute;
      display: block;
      top: -24px;
      left: 0;
      width: 76px;
      height: 58px;
    }

    img {
      width: 18px;
      height: 18px;
      margin-bottom: 6px;
    }

    p {
      display: block;
      height: 14px;
      white-space: break-spaces;
      // overflow: hidden;
      line-height: 14px;
      color: #fff;
      text-align: center;
    }
  }

  .left-menu-list-sub {
    background-color: #3272B2;
    padding: 0;
    transition: all .3s;
    color: white;
    overflow: hidden;
    border-top: 1px solid #2A639B;

    >li {
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    >img {
      margin-right: 4px;
    }
  }

  .left-menu-item-sub-active {
    background-color: #4B94DC;
  }

  .left-menu-item-active {
    opacity: 1;
  }
}

.left-menu-list-cursor {
  width: 3px;
  height: 58px;
  // background-color: #fff;
  position: absolute;
  left: 0;
}

.left-menu-btn {
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;

  i {
    font-size: 24px;
    color: #fff;
    cursor: pointer;

    &[disabled~='disabled'] {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }
}
</style>
